<template>
  <div class="out">
    <zHeaderLink pageTitle="交付样板" :lineActions="lineActions" :selectedLianJie="selectedLianJie" @changeLink="changeLinkHandler"></zHeaderLink>

    <div class="webHtml" :key="webHtmlKey">
      <iframe :src="selectedLianJie.linkUrl+`?userId=${getUserId()}`" width="100%" height="100%" ref="iframeDom"></iframe>
    </div>
  </div>
</template>

<script setup>
import { pageConstant } from '@/config/contant.js'
import { postJiaoFuYangBanList } from '@/api/jiaofuyangban/index.js'
import { useRouter } from 'vue-router'
const router = useRouter()
import { getSelectedXiaoQuId,getUserId } from '@/config/config.js'

if (!getSelectedXiaoQuId()) {
  showDialog({
    message: '暂无小区数据，请先配置小区',
  }).then(() => {
    router.back()
  })
}

/**
 * 获取网页数据
 */
const webHtmlKey = ref(0)
const selectedLianJie = ref({})
const lineActions = ref([])
const loadLianJieListHandler = () => {
  showLoadingToast({
    message: '加载中...',
    forbidClick: true,
    duration: 0
  });

  let index = 0

  postJiaoFuYangBanList({guanLianId: getSelectedXiaoQuId()}).then(res => {
    // 关闭加载中提示
    closeToast();

    if (res.data.code == pageConstant.okCode) {
      if (res.data.data && res.data.data.length > 0) {
        lineActions.value = res.data.data.map(item => {
          return {
            text: item.jiaoFuYangBanFangName,
            linkUrl: item.lianJie,
            value: index++
          }
        })
      }

      if (lineActions.value.length == 0) {
        showDialog({
          message: '暂无BIM图纸，请配置',
        })
      } else {
        selectedLianJie.value = lineActions.value[0]
      }

    } else {
      showToast(res.data.msg);
    }
  })
  .catch((err) => {
    console.log(err)
  })
}
loadLianJieListHandler()

/**
 * 改变链接功能
 */
const changeLinkHandler = (value) => {
  selectedLianJie.value = value
  webHtmlKey.value = webHtmlKey.value + 1
}
</script>

<style lang="scss" scoped>
.out {
  width: 100vw;
  height: 100dvh;

  .header {
    display: flex;
    justify-content: space-between;
    height: 40px;
    align-items: center;
    background-color: rgb(102, 102, 102);
  }

  .webHtml {
    height: calc(100% - 55px);
  }
}
</style>